<template>
    <view class="container">
        <u-navbar title="我的线路" title-color="black" title-size="20px" back-icon-color="black" />
        <view class="line-page">
            <!-- 搜索框 -->
            <w-search
                placeholder="搜索线路"
                v-model="searchKeyword"
                :styles="{ margin: '20rpx' }"
                :is-fixed="true"
                @search="handleSearch"
            />

            <!-- 审核状态标签 -->
            <view class="route-tabs">
                <text
                    v-for="tab in statusTabs"
                    :key="tab.value"
                    :class="['tab-item', { active: activeStatus === tab.value }]"
                    @click="switchStatus(tab.value)"
                    >{{ tab.label }}
                </text>
            </view>

            <!-- 线路列表 -->
            <scroll-view scroll-y style="height: 100vh" @scroll="handleScroll">
                <view class="route-list">
                    <template v-if="routes.length">
                        <view
                            v-for="route in filteredRoutes"
                            :key="route.id"
                            class="route-item"
                            @click="viewDetail(route.id)"
                        >
                            <!-- 左侧图片 -->
                            <image :src="route.line_image" class="route-image" mode="aspectFill" />

                            <!-- 右侧信息 -->
                            <view class="route-info">
                                <text class="route-title">{{ route.title }}</text>

                                <view class="route-desc">
                                    <text class="price-value">￥{{ route.price }}</text>
                                    <text class="price-unit">起/人</text>
                                  <view :class="['audit-status', getStatusClass(route.status)]">
                                    {{ getStatusText(route.status) }}
                                  </view>
                                </view>

                            </view>
                        </view>
                    </template>
                    <template v-else>
                        <view class="no-result">没有符合条件的线路</view>
                    </template>
                </view>
            </scroll-view>

            <u-back-top
                :scroll-top="scrollTop"
                :top="100"
                :customStyle="{
                    backgroundColor: '#FFF',
                    color: '#000',
                    boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
                }"
            />
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'


// 状态管理
const searchKeyword = ref('')
const scrollTop = ref(0)
const activeStatus = ref('all')
const routes = ref<any[]>([])

// 审核状态标签配置
const statusTabs = [
    { label: '全部', value: 'all' },
    { label: '待审核', value: '1' },
    { label: '已通过', value: '2' },
    { label: '被驳回', value: '3' }
]

// 测试数据
const testRoutes = [
    {
        id: 1,
        title: '杭州西溪湿地一日游',
        line_image: 'https://picsum.photos/200/300',
        price: 299,
        status: 'approved',
        tags: ['亲子游', '自然风光']
    },
    {
        id: 2,
        title: '上海迪士尼亲子游',
        line_image: '../../static/images/line_image.png',
        price: 599,
        status: 'pending',
        tags: ['亲子游', '主题公园']
    },
    {
        id: 3,
        title: '苏州园林文化之旅',
        line_image: 'https://picsum.photos/200/302',
        price: 450,
        status: 'rejected',
        tags: ['文化古迹']
    },
    {
        id: 4,
        title: '千岛湖休闲度假游',
        line_image: 'https://picsum.photos/200/303',
        price: 780,
        status: 'approved',
        tags: ['度假', '摄影']
    },
    {
        id: 5,
        title: '黄山登顶观日出',
        line_image: 'https://picsum.photos/200/304',
        price: 899,
        status: 'pending',
        tags: ['登山', '摄影']
    },
    {
        id: 6,
        title: '乌镇水乡风情游',
        line_image: 'https://picsum.photos/200/305',
        price: 399,
        status: 'approved',
        tags: ['古镇', '休闲']
    }
]

// 获取线路数据（测试版）
const getLines = async () => {
    // 模拟API延迟
    // await new Promise((resolve) => setTimeout(resolve, 500))
    //
    // // 模拟数据加载
    routes.value = [...testRoutes]
}

// 切换审核状态
const switchStatus = async (status: string) => {
    activeStatus.value = status
    await getLines()
}

// 搜索处理
const handleSearch = async () => {
    // 实现本地搜索过滤
    const keyword = searchKeyword.value.toLowerCase()
    routes.value = testRoutes.filter((route) => route.title.toLowerCase().includes(keyword))
}

// 状态文本转换
const getStatusText = (status: string) => {
    const statusMap: Record<string, string> = {
        all: '全部',
        pending: '待审核',
        approved: '已通过',
        rejected: '被驳回'
    }
    return statusMap[status] || '未知状态'
}

// 状态样式映射
const getStatusClass = (status: string) => {
    const classMap: Record<string, string> = {
        all: '',
        pending: 'pending',
        approved: 'approved',
        rejected: 'rejected'
    }
    return classMap[status] || ''
}

// 过滤后的路线列表（根据状态筛选）
const filteredRoutes = computed(() => {
    if (activeStatus.value === 'all') return routes.value

    return routes.value.filter((route) => route.status === activeStatus.value)
})

// 查看详情
function viewDetail(routeId: number) {
    uni.navigateTo({
        url: `/pages/line_detail/line_detail?id=${routeId}`
    })
}

// 滚动事件
function handleScroll(e: any) {
    scrollTop.value = e.detail.scrollTop
}

onPageScroll((event: any) => {
    scrollTop.value = event.scrollTop
})

onLoad(() => {
    getLines()
})
</script>

<style lang="scss" scoped>
.container {
    background-color: #fff;
    padding: 20rpx;
}

.line-page {
    background-color: #ffffff;
}

.route-tabs {
    display: flex;
    overflow-x: auto; // 允许横向滚动
    white-space: nowrap; // 防止换行
    -webkit-overflow-scrolling: touch; // iOS 滚动优化
    padding: 20rpx 0;
    scrollbar-width: none; // 隐藏滚动条（可选）
    -ms-overflow-style: none; // 隐藏滚动条（可选）
    &::-webkit-scrollbar {
        display: none; // 隐藏浏览器滚动条（可选）
    }
}

.tab-item {
    flex-shrink: 0; // 防止标签被压缩
    font-size: 28rpx;
    color: black;
    position: relative;
    padding: 10rpx 20rpx;

    &.active {
        font-weight: bold;
    }
}

.route-item {
    display: flex;
    flex-direction: row; // 左右排列
    align-items: center;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;

    padding: 20rpx;
    border-bottom: 1rpx solid #f1f1f1;
}

.route-image {
    width: 240rpx;
    height: 240rpx;
    border-radius: 16rpx;
    flex-shrink: 0;
    object-fit: cover; // 图片内容覆盖整个容器（可选）
}

.route-info {
    flex: 1;
    padding: 0 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.route-title {
    overflow: hidden;
    height: 80rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
}

// 审核状态样式扩展
.audit-status {
    font-size: 24rpx;
    padding: 4rpx 12rpx;
    border-radius: 8rpx;
    margin: 10rpx 0;
    align-self: flex-start; // 左对齐

    &.pending {
        background-color: #fffbe6;
        color: #faad14;
        border: 1rpx solid #faad14;
    }

    &.approved {
        background-color: #f6ffed;
        color: #52c41a;
        border: 1rpx solid #52c41a;
    }

    &.rejected {
        background-color: #fff2f0;
        color: #ff4d4f;
        border: 1rpx solid #ff4d4f;
    }
}

// 保持原有样式结构不变
</style>
